﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AspNetMvc.Models.EventForEditing>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    <%= Model.OperationName %>
</asp:Content>
<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .wml-overview-map-control
        {
            opacity: 0.7;
            filter: alpha(opacity=70);
        }
    </style>
    <style type="text/css">
<!--
 .footer {
  clear: right;
}
-->
</style>
    <style type="text/css">
        #ui-datepicker-div
        {
            display: none;
        }
        /* datepicker footer div */
    </style>
    <script src="<%= Links.Content.jquery_form_plugin.jquery_form_js %>" type="text/javascript"></script>
    <script src="<%= Links.Content.custom.properties_js %>" type="text/javascript"></script>
    <script src="<%= Links.Content.custom.categories_js %>" type="text/javascript"></script>
    <script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
    <link href="<%= Links.Content.colorboxlib.custom.colorbox_css %>" rel="stylesheet"
        type="text/css" />
    <script src="<%= Links.Content.colorboxlib.colorbox.jquery_colorbox_min_js %>" type="text/javascript"></script>
    <link href="<%= Links.Content.jquery_ui_1_8_custom.css.ui_darkness.jquery_ui_1_8_custom_css %>"
        rel="stylesheet" type="text/css" />
    <script src="<%= Links.Content.jquery_ui_1_8_custom.js.jquery_ui_1_8_custom_min_js %>"
        type="text/javascript"></script>
    <script src="<%= Links.Content.jquery_validate.jquery_validate_min_js %>" type="text/javascript"></script>
    <script src="<%= Links.Content.custom.general_js %>" type="text/javascript"></script>
    <script src="<%= Links.Content.custom.places_js %>" type="text/javascript"></script>
    <script type="text/javascript">

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    
 $.validator.addMethod("timeRequired", function(value, element, arg){
    if (arg == true) {
        var selectedIndex = $(element).attr('selectedIndex');
        if (isSelectActive(selectedIndex))
            return true;

        return false;
    }
    
    return true;
 }, "");

    customizeFields();

});

function isEndDateTimeRequired(element) {
                
                    var endDateValue = $('#endDate').val();
                    var endHoursIndex = $('#endHours').attr('selectedIndex');
                    var endMinutesIndex = $('#endMinutes').attr('selectedIndex');

                    if (isNullOrEmpty(endDateValue) && !isSelectActive(endHoursIndex) && !isSelectActive(endMinutesIndex))
                        return false;

                    return true;
                }

var validator = null;

function validateEvent() {
    
    validator = $("#eventForm").validate({
        groups: {
            startTime: "startHours startMinutes",
            endTime: "endHours endMinutes"
        },
        rules: {
            startDate: {
                required: true,
                dateISO: true
            },
            startHours: {
                timeRequired: true
            },
            startMinutes: {
                timeRequired: true
            },
            endDate: {
                required: isEndDateTimeRequired,
                dateISO: true
            },
            endHours: {
                timeRequired: isEndDateTimeRequired
            },
            endMinutes: {
                timeRequired: isEndDateTimeRequired
            },
            title: "required",
            description: "required",
            cityUri: "required"
        },
        messages: {
            startDate: {
                required: "Please enter start date",
                dateISO: "Date format should be yyyy-mm-dd"
            },
            startHours: {
                timeRequired: "Please enter start time"
            },
            startMinutes: {
                timeRequired: "Please enter start time"
            },
            endDate: {
                required: "Please enter end date. End date and time should be fixed together (or not filled at all)",
                dateISO: "Date format should be yyyy-mm-dd"
            },
            endHours: {
                timeRequired: "Please enter end time. You should either fill both end date and time or none of them"
            },
            endMinutes: {
                timeRequired: "Please enter end time. You should either fill both end date and time or none of them"
            },
            title: "Please enter title",
            description: "Please enter description",
            cityUri: "Please choose event location"
        },
        wrapper: "li",
        errorPlacement: function (error, element) {

            var id = element.attr('id');

            var errorContainerId = null;
            if (id == 'startDate' || id == 'startHours' || id == 'startMinutes')
                errorContainerId = 'startDateTimeErrors';
            else if (id == 'endDate' || id == 'endHours' || id == 'endMinutes')
                errorContainerId = 'endDateTimeErrors';
            else if (id == 'title')
                errorContainerId = 'titleErrors';
            else if (id == 'description')
                errorContainerId = 'descriptionErrors';
            else if (id == 'cityUri')
                errorContainerId = 'locationErrors';
            else
                errorContainer = 'generalErrors';

            var errorContainer = $('#' + errorContainerId);
            errorContainer.append(error);
        },
        submitHandler: function(form) {
                 $.loading(true, { align: 'center', img: '<%= Links.Content.jquery_loading_1_6_3.big_loader_gif %>' });

                 var options = {
                    type: 'post',
                    dataType: 'json',
                    success:  eventCreationSuccess,
                    error  :  eventCreationError
                    };
                 
                 $(form).ajaxSubmit(options);
        }
    });
}

function eventCreationSuccess(data) {

    $.loading(false);

    if (data.state == "success")
        window.location.replace(data.redirectUrl);
    else if (data.state == "error")
        $('#generalErrors').html(data.errorMessage);
}

function eventCreationError(data) {

    $.loading(false);

    alert("Error occured. Try again later");
}

//ToDo: Encode it some way. What if EnterCity contains ' ?
var enterCityText = '<%= ViewStrings.EventsStrings.EnterCity %>';
var updateObjectsFirstText = '<%= ViewStrings.EventsStrings.UpdateObjectsFirst %>';
var chooseObjectTypeText = '<%= ViewStrings.EventsStrings.ChooseObjectType %>';
var noObjectsInsideCurrentMapRegionText = '<%= ViewStrings.EventsStrings.NoObjectsInsideCurrentMapRegion %>';

var noCityWasFoundText = '<%= ViewStrings.EventsStrings.NoCityWasFound %>';

var locationInitialPart1 = '<%= ViewStrings.EventsStrings.LocationInitialPart1 %>';
var locationAlreadySetPart1 = '<%= ViewStrings.EventsStrings.LocationAlreadySetPart1%>';

    </script>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <form name="eventForm" id="eventForm" method="post" class="sob">
    <div class="fon">
        <div class="drevo">
            <h2>
                <%= Model.OperationName %>
            </h2>
        </div>
        <div class="sobitie">
            <div id="properties">
                <%
                    Html.RenderPartial("EventsMarkup/EventForEditing");
                %>
            </div>
        </div>
    </div>
    <div class="for_tree">
        <input type="submit" id="submitButton" class="tree" value="<%= Model.OperationButtonCaption %>" />
    </div>
    </form>
</asp:Content>
